<template>
  <div class="fmjrpromote">
    <div class="fmjrpromote-header">
      <img :src="require('./logo_H.png')" alt="">
      <span @click="toHome">返回首页</span>
    </div>
    <div class="fmjrpromote-banner">
      <img :src="require('./banner.png')" alt="" width="100%" height="53.333333333333333%">
    </div>
    <ul class="fmjrpromote-list">
      <li>
        <img :src="require('./list1.png')" alt="">
        <p>实力控股</p>
      </li>
      <li>
        <img :src="require('./list2.png')" alt="">
        <p>安全保障</p>
      </li>
      <li>
        <img :src="require('./list3.png')" alt="">
        <p>项目无忧</p>
      </li>
      <li>
        <img :src="require('./list4.png')" alt="">
        <p>稳高收益</p>
      </li>
    </ul>
    <div class="fmjrpromote-new">
      <img :src="require('./title1.png')" alt="" class="fmjrpromote-new-title">
      <ul class="fmjrpromote-new-list">
        <li>
          <img :src="require('./newlist1.png')" alt="">
          <p>用户完成注册后可直接出借</p>
        </li>
        <li>
          <img :src="require('./newlist2.png')" alt="">
          <p>用户可在分秒金融官网查看活动详情</p>
        </li>
        <li>
          <img :src="require('./newlist3.png')" alt="">
          <p>用户可在“我的账户-我的红包”中查看详情</p>
        </li>
      </ul>
    </div>
    <div class="fmjrpromote-steps">
      <img :src="require('./steps.png')" alt="">
    </div>
    <div class="fmjrpromote-great">
      <div class="fmjrpromote-great-title">
        <img :src="require('./great.png')" alt="">
      </div>
      <div class="fmjrpromote-great-good1">
        <p class="fmjrpromote-great-good1-title">新手专享标</p>
        <p class="fmjrpromote-great-good1-per">8+<strong>3.5</strong><span>%</span></p>
        <ul>
          <li>期限一个月</li>
          <li></li>
          <li>100元起投</li>
        </ul>
        <div class="fmjrpromote-great-good1-btn" @click="toInvest">立即出借</div>
        <img :src="require('./label.png')" alt="" class="fmjrpromote-great-good1-label">
      </div>
    </div>
    <div class="fmjrpromote-good">
      <div class="fmjrpromote-good-title">
        <img :src="require('./month.png')" alt="">
        <span>分秒月盈</span>
      </div>
      <div class="fmjrpromote-good-content">
        <div class="left">
          <p>8-10<span>%</span></p>
          <p>年利率</p>
        </div>
        <div class="right">
          <ul>
            <li>
              <img :src="require('./time.png')" alt="">
              <span>1-3个月</span>
            </li>
            <li>
              <img :src="require('./rmb.png')" alt="">
              <span>100元起投</span>
            </li>
          </ul>
          <div class="right-btn" @click="toInvest">出借</div>
        </div>
      </div>
    </div>
    <div class="fmjrpromote-good">
      <div class="fmjrpromote-good-title">
        <img :src="require('./month.png')" alt="">
        <span>分秒省心</span>
      </div>
      <div class="fmjrpromote-good-content">
        <div class="left">
          <p>11<span>%</span></p>
          <p>年利率</p>
        </div>
        <div class="right">
          <ul>
            <li>
              <img :src="require('./time.png')" alt="">
              <span>6个月</span>
            </li>
            <li>
              <img :src="require('./rmb.png')" alt="">
              <span>100元起投</span>
            </li>
          </ul>
          <div class="right-btn" @click="toInvest">出借</div>
        </div>
      </div>
    </div>
    <div class="fmjrpromote-about">
      <div class="fmjrpromote-about-title">
        <img src="./about.png" alt="关于分秒金融">
      </div>
      <p><span>分秒金融</span>是保通控股有限公司开发运营的网络借贷信息服务平台，致力于为广大投资者和有融资需求的企业或提供专业、高效、安全的网络借贷信息服务。保通控股有限公司是一家专门从事投资管理、资产管理、项目投资、投资咨询等业务的大型企业，注册资金5亿元，成立初期便获得央企多级全资子公司的战略投资。</p>
      <div class="fmjrpromote-about-slide">
        <div class="fmjrpromote-about-slide-container">
          <img src="./1.png" alt="">
          <img src="./2.png" alt="">
          <img src="./3.png" alt="">
          <img src="./4.png" alt="">
          <img src="./5.png" alt="">
        </div>
      </div>
    </div>
    <div class="fmjrpromote-btn">
      <img :src="require('./btn.png')" alt="" @click="toInvest">
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        inviteCode: ''
      }
    },
    methods: {
      toHome () {
        this.$router.push('/index')
      },
      toInvest () {
        const userAcctKey = this.$cookie.get('acctKey')
        if (userAcctKey) {
          this.$router.push('/invest')
        } else {
          this.$router.push(`/signup?c=${this.inviteCode}`)
        }
      }
    },
    created () {
      if (this.$route.query['c'] && this.$route.query['c'] !== '') {
        this.inviteCode = this.$route.query['c']
      }
    }
  }
</script>

<style lang='scss'>
  .fmjrpromote {
    width: 100%;
    background: #f5f5f5;
    padding-bottom: (60vw/7.5);
    &-header {
      height: (110vw/7.5);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      img {
        width: (255vw/7.5);
        margin-left: (34vw/7.5);
      }
      span {
        box-sizing: border-box;
        display: inline-block;
        width: (144vw/7.5);
        height: (48vw/7.5);
        border: 1px solid #e5e5e5;
        border-radius: (6vw/7.5);
        margin-right: (28vw/7.5);
        font-size: (24vw/7.5);
        color: #6d6c6c;
        text-align: center;
        line-height: (46vw/7.5);
      }
    }
    &-banner {
      width: 100%;
      img {
        width: 100%;
      }
    }
    &-list {
      display: flex;
      justify-content: space-around;
      font-size: (24vw/7.5);
      text-align: center;
      padding-top: (36vw/7.5);
      margin-bottom: (20vw/7.5);
      border-bottom: 1px solid #e5e5e5;
      background: #fff;
      li {
        width: (102vw/7.5);
      }
      img {
        width: 100%;
      }
      p {
        margin: (24vw/7.5) 0 (38vw/7.5) 0;
      }
    }
    &-new {
      height: (750vw/7.5);
      text-align: center;
      background: #fff;
      padding-top: (40vw/7.5);
      border-top: 1px solid #e5e5e5;
      &-title {
        width: (190vw/7.5);
      }
      &-list {
        position: relative;
        text-align: center;
        font-size: 14px;
        color: #333;
        li {
          width: (260vw/7.5);
          position: absolute;
          img {
            width: 100%;
          }
          p {
            font-size: (24vw/7.5);
            margin-top: (5vw/7.5);
            line-height: (36vw/7.5);
            padding: 0 (15vw/7.5)
          }
          &:nth-child(1) {
            left: (20vw/7.5);
            top: (20vw/7.5);
          }
          &:nth-child(2) {
            right: (20vw/7.5);
            top: (20vw/7.5);
          }
          &:nth-child(3) {
            left: 50%;
            top:  (280vw/7.5);
            transform: translateX(-50%);
          }
        }
      }
    }
    &-steps {
      width: 100%;
      background: #fff;
      text-align: center;
      padding: (30vw/7.5) 0;
      img {
        width: 90%;
      }
    }
    &-great {
      border-top: 1px solid #e5e5e5;
      text-align: center;
      background: #fff;
      &-title {
        width: 100%;
        padding: (30vw/7.5) 0;
        background: #f5f5f5;
        img {
          width: (190vw/7.5);
        }
      }
      &-good1 {
        position: relative;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;        
        &-title {
          font-size: (26vw/7.5);
          color: #030303;
          padding-top: (30vw/7.5);
        }
        &-per {
          font-size: (60vw/7.5);
          color: #ff0a27;
          margin-top: (46vw/7.5);
          strong {
            font-weight: normal;
          }
          span {
            font-size: (26vw/7.5);
          }
        }
        ul {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: (30vw/7.5);
          li {
            width: (236vw/7.5);
            font-size: (28vw/7.5);
            color: #000;
            &:nth-child(2) {
              width: 1px;
              height: (28vw/7.5);
              background: #ccc;
            }
          }
        }
        &-btn {
          width: (584vw/7.5);
          height: (80vw/7.5);
          margin: (36vw/7.5) auto (30vw/7.5) auto;
          background: #ff202e;
          border-radius: (6vw/7.5);
          text-align: center;
          line-height: (80vw/7.5);
          font-size: (32vw/7.5);
          color: #fff;
        }
        &-label {
          position: absolute;
          top: 0;
          right: 0;
          width: (96vw/7.5);
        }
      }

    }
    &-good {
      margin-top: (20vw/7.5);
      border-top: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;  
      background: #fff;
      &-title {
        height: (68vw/7.5);
        display: flex;
        align-items: center;
        img {
          width: (34vw/7.5);
          height: (34vw/7.5);
          margin-right: (14vw/7.5);
          margin-left: (28vw/7.5);
        }
        span {
          font-size: (26vw/7.5);
          color: #333;
          margin-top: (4vw/7.5);
        }
      }
      &-content {
        display: flex;
        width: 90%;
        margin: 0 auto;
        height: (120vw/7.5);
        padding: (25vw/7.5) 0;
        border-top: 1px solid #e5e5e5;
        .left {
          width: (294vw/7.5);
          text-align: center;
          & p {
            &:nth-child(1) {
              font-size: (50vw/7.5);
              color: #ff0a27;
              margin-top: (14vw/7.5);
              span {
                font-size: (30vw/7.5);
              }
            }
            &:nth-child(2) {
              font-size: (22vw/7.5);
              color: #666;
              margin-top: (10vw/7.5);
            }
          }
        }
        .right {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex: 1;
          border-left: 1px solid #e5e5e5;
          ul {
            li {
              display: flex;
              align-items: center;
              margin-top: (18vw/7.5);
              img {
                width: (30vw/7.5);
                height: (30vw/7.5);
                margin-right: (15vw/7.5);
                margin-left: (20vw/7.5);
              }
              span {
                font-size: (24vw/7.5);
                color: #333;
              }
            }
          }
          &-btn {
            width: (142vw/7.5);
            height: (54vw/7.5);
            background: #ff202e;
            border-radius: (4vw/7.5);
            font-size: (26vw/7.5);
            line-height: (60vw/7.5);
            color: #fff;
            text-align: center;
          }
        }
      }
    }
    &-about {
      text-align: center;
      font-size: (26vw/7.5);
      line-height: (40vw/7.5);
      border-bottom: 1px  solid #e5e5e5;
      background: #fff;
      &-title {
        background: #f5f5f5;
        padding: (30vw/7.5) 0 (20vw/7.5) 0;
        img {
          width: (190vw/7.5);
        }
      }
      p {
        text-align: left;
        padding: (28vw/7.5) (20vw/7.5) 0 (20vw/7.5);
        border-top: 1px  solid #e5e5e5;
        color: #333;
        span {
          color: #ff202e;
        }
      }
      &-slide {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: (148vw/7.5);
        margin-top: (28vw/7.5);
        margin-bottom: (30vw/7.5);
        padding: 0 (20vw/7.5);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        &-container {
          width: (1210vw/7.5);
          position: absolute;
          font-size: 0;
          text-align: left;
          &:after {
            content: ' ';
            display: table;
            clear: both;
          }
          img {
            float: left;
            width: (222vw/7.5);
            height: (148vw/7.5);
            margin-right: (20vw/7.5);
          }
        }
      }
    }
    &-btn {
      text-align: center;
      margin-top: (60vw/7.5);
      img {
        width: (306vw/7.5);
        height: (62vw/7.5);
      }
    }
  }
</style>
